import { EXAM_QUES_TITLE_MAX_LEN } from '@/common';
import { DeleteOutlined, RightOutlined } from '@ant-design/icons';
import { Form, Input, Radio } from 'antd';
import classNames from 'classnames';
import React from 'react';
import OStyle from '../ExaminationItem/index.less';
import type { ExaminationProps } from '../ExaminationItem/interface';

const requireRules = (text: string) => {
  return [{ required: true, whitespace: true, message: text }]; //如果字段仅包含空格则校验不通过，只在 type: 'string' 时生效, 用于checkBox会导致校验不通过
};

export const JUDEOPTIONS = [
  { value: '0', label: '错' },
  { value: '1', label: '对' },
];

const JudgeExaminationItem: React.FC<ExaminationProps> = (props) => {
  const { exaFields, exaField, exaIndex, title, collPanesActiveKeys, onSetCollPanesActiveKeys, onRemoveExamination } =
    props;

  const onCollPane = (e: React.MouseEvent, exaIndex: number) => {
    e.stopPropagation();
    const currIndex = collPanesActiveKeys?.findIndex((val) => val === exaIndex);
    if (typeof currIndex === 'number' && currIndex > -1) {
      collPanesActiveKeys?.splice(currIndex, 1);
    } else {
      collPanesActiveKeys?.push(exaIndex);
    }
    onSetCollPanesActiveKeys?.([...(collPanesActiveKeys || [])]);
  };

  return (
    <div className={OStyle.pane_item}>
      {title && (
        <div className={OStyle.item_header}>
          <div
            className={OStyle.header_text}
            onClick={(e) => {
              onCollPane(e, exaIndex);
            }}
          >
            <RightOutlined
              className={classNames(OStyle.text_collapse, {
                [`${OStyle.collapse_rotate}`]: collPanesActiveKeys?.includes(exaIndex),
              })}
            />
            <span className={OStyle.text_text}>{title} </span>
          </div>
          {exaFields.length > 1 && (
            <div className={OStyle.header_operation}>
              <span
                onClick={() => {
                  onRemoveExamination(exaIndex);
                }}
              >
                <DeleteOutlined />
              </span>
            </div>
          )}
        </div>
      )}
      <div
        className={classNames(OStyle.item_content, {
          [`${OStyle.content_hidden}`]: !collPanesActiveKeys?.includes(exaIndex),
        })}
      >
        <div className={OStyle.content_examination_name}>
          {/* 题目 */}
          <Form.Item
            name={[exaField.name, 'content']}
            label="题目"
            rules={requireRules(`请输入【${exaIndex + 1}】题题目`)}
          >
            <Input
              placeholder="请输入"
              showCount
              autoComplete="off"
              style={{ width: 'calc(100% - 140px)' }}
              maxLength={EXAM_QUES_TITLE_MAX_LEN}
            />
          </Form.Item>
        </div>

        {/*答案*/}
        <Form.Item
          label="答案"
          name={[exaField.name, 'anwserItemList']}
          validateTrigger={['onChange']}
          required={true}
          rules={[
            {
              required: true,
              message: `请选择第【${exaIndex + 1}】题答案`,
            },
          ]}
        >
          <Radio.Group options={JUDEOPTIONS}></Radio.Group>
        </Form.Item>
      </div>
    </div>
  );
};
export default JudgeExaminationItem;
